﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Pragma" content="no-cache" />
  <title>Mason</title>
  <link href="../../assets/css/reset.css" type="text/css" rel="stylesheet">
  <link href="./assets/css/grid.css" type="text/css" rel="stylesheet">
  <link href="./assets/css/main.css" type="text/css" rel="stylesheet">
</head>

<body>
  <main>
   
     
      <!-- <button id="btnCreate" style="width: 100%">Generate poster</button> -->


      <div class="tabs">
        <nav>
          <a href="#fmtOption" class="active"><i class="icon icon-14 iconfont">&#xe753;</i> Format options</a>
          <a href="#kvOption" ><i class="icon icon-14 iconfont">&#xe636;</i> KV options</a>
        </nav>
        <section id="fmtOption">
          <ol class="row">
            <li class="col-12">
              <label><i class="icon iconfont ">&#xe653;</i></label>
              <div id="fmtTitle" class="place-show" contenteditable="true" placeholder="MR title"></div>
            </li>
            
            <li class="col-12">
              <label><i class="icon iconfont ">&#xedc4;</i></label>
              <div id="fmtSubtitle" class="place-show" contenteditable="true" placeholder="MR subtitle"></div>
            </li>
            <li class="col-2">
              <div id="fmtJettaRatio" class="place-show" contenteditable="false" placeholder="ratio">1.2</div>
            </li>
            <li class="col-2">
              <div id="fmtVwRatio" class="place-show" contenteditable="false" placeholder="ratio">0.8</div>
            </li>
            
            <li  class="col-2">
              <div id="isAll" class="check-button active">
                <i class="icon icon-16 iconfont ">&#xe6f8;</i> 
              </div>
            </li>
            <li  class="col-2">
              <div id="isLight" class="check-button">
                <i class="icon icon-16 iconfont ">&#xe62e;</i> 
              </div>
            </li>
            <li  class="col-2">
              <div id="isMob" class="check-button" toggle="fmtJettaRatio fmtVwRatio">
                <i class="icon icon-14 iconfont ">&#xe606;</i> 
              </div>
            </li>
            <li  class="col-2">
              <div id="needQR" class="check-button">
                <i class="icon icon-14 iconfont ">&#xe647;</i> 
              </div>
            </li>
            
            
          </ol>
        </section> 
        <section id="kvOption">
          <ol class="row">
            <li class="col-3">
              <span class="title">Main Derection</span>
              
              <!-- <div id="kvPath" class="place-show" contenteditable="true" placeholder="Src"></div> -->
            </li>
            <li class="col-1"></li>
            <li class="col-4">
              <button id="kvPath"><i class="icon iconfont">&#xe636;</i>  KV src</button>
            </li>
            <li class="col-4">
              <label>%</label>
              <div id="kvRatio" class="place-show" contenteditable="true" placeholder="ratio">100</div>
            </li>
            <!-- <li class="col-12"></li> -->

            <li class="col-1"><div id="lt" class="check-button" name="mainPosition">↖</div></li>
            <li class="col-1"><div id="t" class="check-button" name="mainPosition">↑</div></li>
            <li class="col-1"><div id="rt" class="check-button" name="mainPosition">↗</div></li>
            
            <li class="col-1"></li>
            <li class="col-4">
              <label>↔</label>
              <div id="kvWidth" class="place-show" contenteditable="true" placeholder="width"></div>
            </li>
            <li class="col-4">
              <label>↕</label>
              <div id="kvHeight" class="place-show" contenteditable="true" placeholder="height"></div>
            </li>

            <li class="col-1"><div id="l" class="check-button" name="mainPosition">←</div></li>
            <li class="col-1"><div id="c" class="check-button" name="mainPosition">●</div></li>
            <li class="col-1"><div id="r" class="check-button" name="mainPosition">→</div></li>

            <li class="col-1"></li>
            <li class="col-4">
              <label>┎</label>
              <div id="mainLeft" class="place-show" contenteditable="true" placeholder="left"></div>
            </li>
            <li class="col-4">
              <label>┚</label>
              <div id="mainRight" class="place-show" contenteditable="true" placeholder="right"></div>
            </li>

            <li class="col-1"><div id="lb" class="check-button" name="mainPosition">↙</div></li>
            <li class="col-1"><div id="b" class="check-button" name="mainPosition">↓</div></li>
            <li class="col-1"><div id="rb" class="check-button" name="mainPosition">↘</div></li>

            <li class="col-1"></li>
           
            <li class="col-4">
              <label>┍</label>
              <div id="mainTop" class="place-show" contenteditable="true" placeholder="top"></div>
            </li>
            <li class="col-4">
              <label>┙</label>
              <div id="mainBottom" class="place-show" contenteditable="true" placeholder="bottom"></div>
            </li>
          </ol>
        </section>
      </div>
      
      <button id="makeMR" class="submit"><i class="icon icon-14 iconfont ">&#xe61c;</i> Start</button>
     
  </main>

  <script type="text/javascript" src="../../assets/js/CSInterface.js"></script>
  <script type="text/javascript" src="../../assets/js/jquery2.1.js"></script>
  <script type="text/javascript" src="./bindClickEvents.js"></script>
  <script type="text/javascript" src="./assets/js/ui.js"></script>
  <script type="text/javascript" src="./bindEvents.js"></script>

</body>
</html>